<script setup>
import {ref} from 'vue';
const warpRef = ref(null);
const img1Ref = ref(null);
const img2Ref = ref(null);

const handleSlider = event => {
  document.querySelector(".img2Box").style.width = event.target.value + "%"
  document.querySelector(".slider-button").style.left = `calc(${event.target.value}% - 15px)`
}

const onmousewheelHandle = event => {
  let transform = img1Ref.value.style.transform
  // 有？获取值 ： 默认赋值1 
  // transform.split("(")[1].split(")")[0]这里获取的是字符串
  let zoom = transform.indexOf("scale") != -1 ? Number(transform.split("(")[1].split(")")[0]): 1
  // wheelDelta 下滑滚轴为-120 上滑滚轴为120
  zoom += event.wheelDelta / 1200
  // 限制缩放倍数，可自行更改
  if (zoom > 0.1 && zoom < 8) {
    // 两个图片需要一起变
    img1Ref.value.style.transform = "scale(" + zoom + ")"
    img2Ref.value.style.transform = "scale(" + zoom + ")"
  }
}

const onmousedownHandle = event => {
  // 1表示滚轮按下
  if (event.button === 1) {
    let wrap = warpRef.value;
    // 鼠标x坐标减去图片的left
    // 记录当前鼠标按下的位置和图片的位置
    let x = event.pageX;
    let y = event.pageY;
    let imgX = img1Ref.value.offsetLeft;
    let imgY = img1Ref.value.offsetTop;
    // 添加鼠标移动事件
    wrap.$el.addEventListener('mousemove', move)
    function move(e) {
      // e.pageX - X === e.pagex - e.pagex(初始鼠标的位置) + offsetLeft // 翻译过来就是鼠标移动距离加上图片的left
      img1Ref.value.style.left = e.pageX - x + imgX + 'px'
      img1Ref.value.style.top = e.pageY - y + imgY + 'px'
      img2Ref.value.style.left = e.pageX - x + imgX + 'px'
      img2Ref.value.style.top = e.pageY - y + imgY + 'px'
    }
    // 添加鼠标抬起事件，鼠标抬起，将事件移除
    wrap.$el.addEventListener('mouseup', () => {
      wrap.$el.removeEventListener('mousemove', move)
    })
    // 鼠标离开父级元素，把事件移除
    wrap.$el.addEventListener('mouseout', () => {
      wrap.$el.removeEventListener('mousemove', move)
    })
  }
}

</script>

<template>
  <div class="common-layout" >
    <el-container class="container">
      <el-aside class="side">
      </el-aside>
      <el-main class="content" ref="warpRef" @mousewheel="onmousewheelHandle" @mousedown="onmousedownHandle">
        <div class="imgBox">
          <img class="img1" src="/assets/originalImage.png" ref="img1Ref" alt="">
        </div>
        <div class="imgBox img2Box">
          <img class="img2" src="/assets/repair.png" ref="img2Ref" alt="">
        </div>
        <input type="range" min="0" max="100" value="50" class="slider" name='slider' id="slider" @input="handleSlider">
        <div class='slider-button'></div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang='less' scoped>
.common-layout {
  overflow-x: hidden;
  background: @light-common-layout;
  width: 100%;
  height: 100vh;
  padding: 20px 20px 20px 8px;
  box-sizing: border-box;

  .container {
    height: 100%;
    border-radius: 10px;
    border-right: 1px dashed #efeeee;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    .side {
      width: 300px;
      height: 100%;
      border-right: 1px dashed #ebebeb;
      padding: 0 18px;
    }

    .content {
      position: relative;
      width: 100%;
      padding: 0;
      overflow: hidden;
      .imgBox {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .img2Box {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
      }
      img {
        position: relative;
        width: 1500px;
        height: 860px;
        object-fit: scale-down;
      }
      .slider {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        appearance: none;
        margin: 0;
        outline: none;
        background: rgba(242, 242, 241, 0);
        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 6px;
          height: 1000px;
          background: white;
          cursor: pointer;
        }
      }
      .slider-button {
        pointer-events: none;
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: white;
        left: calc(50% - 15px);
        top: calc(50% - 18px);
        display: flex;
        justify-content: center;
        align-items: center;
        &::after {
          content: '';
          padding: 3px;
          display: inline-block;
          border: solid #5D5D5D;
          border-width: 0 2px 2px 0;
          transform: rotate(-45deg);
        }
        &::before {
          content: '';
          padding: 3px;
          display: inline-block;
          border: solid #5D5D5D;
          border-width: 0 2px 2px 0;
          transform: rotate(135deg);
        }
      }
    }
  }
}
</style>
